<template>
    <!--作为动态div播放器，动态添加-->
    <div v-bind:id="playerID"></div>
<!--    <div  class="prism-player" id="J_prismPlayer"></div>-->
</template>

<script>
    export default {
        name: "player",
        props:{
            playerID:{
                default:"player-div"
            },
        },
        data:function () {
            return {
                //播放器实例
                aliPlayer:{},
            }
        },
        methods:{
            //基于URL的播放
            playURL(url){
                let _this=this;
                console.log("开始播放：",url);
                //如果已有播放器，则将播放器的div删除
                if(_this.aliPlayer){
                    _this.aliPlayer=null;
                    //先试用默认ID-#J_prismPlayer
                    //$("#J_prismPlayer").remove();
                    //防止页面内出现ID相同，转化为动态可配置id
                    $("#"+_this.playerID+'-player').remove();
                }
                //初始化播放器
                //$("#"+_this.playerID).append("<div class=\"prism-player\" id=\"J_prismPlayer\"></div>");
                $("#"+_this.playerID).append("<div class=\"prism-player\" id=\"" + _this.playerID + "-player\"></div>");
                _this.aliPlayer=new Aliplayer({
                    //id:'J_prismPlayer',
                    id:_this.playerID+'-player',
                    width:'100%',
                    autoplay:false,//不自动播放
                    source:url,
                    cover:'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
                },function (player) {
                    console.log("阿里播放器已创建!");
                });
            },

            /**
             * 获取播放凭证，实现页面播放
             * @param vod
             */
            playVOD(vod){
                let _this=this;
                Loading.show();
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/file/admin/get-author/'+vod)
                .then((responseAuthor)=>{
                    Loading.hide();
                    let response=responseAuthor.data;

                    if(response.success){
                        //如果已有播放器，则删除已有播放器
                        if(_this.aliPlayer){
                            _this.aliPlayer=null;
                            $("#"+_this.playerID+'-player').remove();
                        }
                        //初始化播放器
                        $("#"+_this.playerID).append("<div class=\"prism-player\" id=\"" + _this.playerID + "-player\"></div>");
                        _this.aliPlayer=new Aliplayer({
                            id:_this.playerID+'-player',
                            width:'100%',
                            autoplay:false,
                            vid:vod,
                            playauth:response.responseData,
                            cover:'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
                            encryptType:1,//当播放私有加密流encrypt时设置
                        },function (player) {
                            console.log("阿里播放器已创建!");
                        });
                    }else{
                        Toast.warning("播放错误！");
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>